import { NavLink, Link, useNavigate } from "react-router"

export default function Home() { 
  const navigate = useNavigate()
  return <>
    <h1>路由知识</h1>
    <div>
      <NavLink to="/about?userId=123">跳转About</NavLink>
    </div>
    <div>
      <button onClick={() => navigate('/intro/123/shawlee')}>跳转Intro</button>
    </div>
    <div>
      <button onClick={() => navigate('/about', { state: { userId: 123 } })}>跳转About(state传参)</button>
      {/* <Link to='/about' state={{ title: 'hello' }}>跳转About(state传参)</Link> */}
      {/* <NavLink to='/about' state={{ title: 'hello' }}>跳转About(state传参)</NavLink> */}
    </div>
  </>
}

/**
 * 总结
    一、React Router 提供了三种跳转方式：Link（最简单的跳转方式）、NavLink、useNavigate


    二、React Router 提供了三种参数传递方式，各有特点：

    1. Params 方式 (/user/:id) - 读取参数 useSearchParams
    适用于：传递必要的路径参数（如ID）
    特点：符合 RESTful 规范，刷新不丢失
    限制：只能传字符串，参数显示在URL中

    2. Query 方式 (/user?name=shaw) - 读取参数 useParams
    适用于：传递可选的查询参数
    特点：灵活多变，支持多参数
    限制：URL可能较长，参数公开可见

    3. State 方式 - 读取参数 useLocation
    适用于：传递复杂数据结构
    特点：支持任意类型数据，参数不显示在URL
    限制：刷新可能丢失，不利于分享
    选择建议：必要参数用 Params，筛选条件用 Query，临时数据用 State。
 */